<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拼手气红包</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="./redPacket.css">
</head>

<body>
  <div class="red-packet-wraps padding-lr-16">
    <div class="red-Packet-head flex-two-between margin-tb-10">
      <div>
        <span>拼手气抢红包</span>
        <span>活动介绍</span>
      </div>
      <div><button class="layui-btn layui-btn-normal">保存</button></div>
    </div>
    <div class="layui-collapse">
      <form class="layui-form" lay-filter="global-form" onsubmit="return false;">

        <!-- 基础设置 begin -->
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">基础设置</h2>
          <div class="layui-colla-content layui-show">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">活动名称</label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="请输入活动名称"
                    autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">活动有效期限</label>
                <div class="layui-input-inline">
                  <input type="text" name="beginDate" required lay-verify="required" placeholder="请选择开始时间"
                    autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                  <input type="text" name="beginDate" required lay-verify="required" placeholder="请选择开始时间"
                    autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">红包有效期限</label>
                <div class="layui-input-inline">
                  <input type="text" name="beginDate" required lay-verify="required" placeholder="请选择开始时间"
                    autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                  <input type="text" name="beginDate" required lay-verify="required" placeholder="请选择开始时间"
                    autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid user-icon-info-wrap" data-infotext='提示: 红包有效期为可拆红包的有效期,有效期内红包未领取完且符合领取条件的用户可领取红包;红包有效期不受整个活动有效期的限制;未设置红包有效期则以活动有效期为准;'><i
                    class="layui-icon layui-icon-tips user-icon-tips"></i><span class="user-icon-tips-text">说明</span>
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">领取红包群体限制</label>
                <div class="layui-input-inline w650">
                  <input type="radio" name="sex" value="1" title="所有人" checked>
                  <input type="radio" name="sex" value="2" title="因此活动注册的新会员">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">分享者领取红包限制</label>
                <div class="layui-input-inline radio-include-input" style="width:380px;">
                  <input type="radio" name="sex1" value="1" title="">
                  领取红包人数大于等于
                  <input type="text" class="layui-input layui-input-mini"> <span>人时,可领取红包</span> 
                </div>
                <div class="layui-input-inline" style="width:110px;">
                  <input type="radio" name="sex1" value="1" title="不可领取">
                </div>
                <div class="layui-form-mid user-icon-info-wrap" data-infotext='提示: 0表示无限制;'><i
                  class="layui-icon layui-icon-tips user-icon-tips"></i><span class="user-icon-tips-text">说明</span>
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">出现分享弹窗场景</label>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="required">
                    <option value="1">任意消费满</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" placeholder="填0或不输入则表示无限制">
                </div>
                <div class="layui-form-mid">元</div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">适用门店</label>
                <div class="layui-input-inline">
                  <input type="radio" name="sex2" value="1" title="全部" checked>
                  <input type="radio" name="sex2" value="2" title="部分门店">
                </div>
                <div class="layui-form-mid">
                  <span class="form-mini-normal-btn">+添加门店</span>
                </div>
              </div>
            </div>
            <div class="add-store-table">
              <div class="layui-form-item" style="margin-bottom:0px;width:100%;">
                <div class="layui-inline">
                  <div class="layui-input-inline">
                    <select name="city" lay-verify="required">
                      <option value="1">所有区域</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="city" lay-verify="required">
                      <option value="1">服务范围</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="输入门店名称关键词">
                  </div>
                  <div class="layui-input-inline" style="width:100px;">
                    <button class="layui-btn layui-btn-normal">查询</button>
                  </div>
                </div>
                <button class="layui-btn layui-btn-normal" style="float:right;">取消选择</button>
              </div>
              <table id="userAddStoreTable" lay-filter="userAddStoreTable"></table>
            </div>

          </div>
        </div>
        <!-- 基础设置 end -->
        <!-- 红包奖励规则设置 begin -->
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">红包奖励规则设置</h2>
          <div class="layui-colla-content layui-show">
              <div class="red-packet-wrap" id="red-packet-wrap">
                <!-- <div id="redPacketItem1">
                  <p>手气最佳的红包设置</p>
                  <div>发放 <input type="text" class="layui-input layui-input-mini" readonly >个红包,总金额<b>0</b>元</div>
                  <div>最佳手气红包在第<input type="text" class="layui-input layui-input-mini">位以后的领取者随机产生</div>
                  <div>
                    该红包奖励代金券<b>0</b>张，代金额<b>0</b>元
                    <div class="form-mini-normal-btn margin-left-30">+添加代金券</div>
                  </div>
                  <table id="redPacketTable1"></table>
                  <div>该红包奖励余额<input type="text" class="layui-input layui-input-mini">元</div>
                </div>
                <div id="redPacketItem2">
                  <p>手气第二的红包设置</p>
                  <div>发放<input type="text" class="layui-input layui-input-mini">个红包,总金额<b>0</b>元,代金券<b>0</b>张</div>
                  <div>
                    每个红包奖励代金券<b>0</b>张,代金额<b>0</b>元,<b>0</b>个红包发放代金券<b>0</b>张,代金额<b>0</b>元
                    <div class="form-mini-normal-btn margin-left-30">+添加代金券</div>
                  </div>
                  <table id="redPacketTable2"></table>
                  <div>每个红包奖励余额<input type="text" class="layui-input layui-input-mini">元,<b>0</b>个红包发放金额<b>0</b>元</div>
                </div> -->
              </div>
              <div class="add-red-packet-div red-packet-operator-btn" data-type="addpacket">+再添加一级手气红包</div>
          </div>
        </div>
        <!-- 红包奖励规则设置 end -->

        <div class="layui-colla-item">
          <h2 class="layui-colla-title">移动端页面UI配置</h2>
          <div class="layui-colla-content layui-show red-packet-mobile-set">
            <div class="red-packet-title">领取红包页面UI配置</div>
            <div class="red-packet-mobile-item-wrap">
              <div class="set-ui-item" id="get_red_packet_bg_target">
                <div class="set-ui-item-head">拼手气抢红包</div>
                <div class="get-red-packet-img  show-set-item" data-index=1>
                  <img class="get_red_packet_img_target" src="" alt="">
                </div>
                <div class="red-packet-shadow show-set-item"  data-index=2>
                  <div class="red-packet-content">
                    <div class="get_success_main_text_target">恭喜您获得红包111</div>
                    <div class="get_success_second_text_target">快速分享给更多朋友来领取哦~</div>
                    <div class="coupon">
                      <div>
                       10
                       <div>元</div>
                      </div>
                      <div>
                        <div>会员账户储值余额</div>
                        <div>手气不错，抢到会员余额小红包啦~</div>
                        <div class="get_coupon_second_title_select_target">仅限福州区域门店使用</div>
                      </div>
                    </div>
                    <div class="get-red-packet-text">红包已放入您的账户 <span>去查看 ></span></div>
                    <div class="get-red-packet-button">
                      <div class="get_button_color_target">立即使用</div>
                    </div>
                  </div>
                </div>
                <div class="luck-text">\\ 大家的手气 //</div>
                <div class="show-luck-count get_record_color_target get_record_invite_text_target get_record_show_radio_target">还可以邀请1位好友</div>
                <div class="luck-shadow  show-set-item" data-index=3>
                  <div class="luck-content">
                   <div>
                     <div>
                       <img src="../../img/head.png" alt="头像">
                     </div>
                     <div>
                        <div>追风少年</div>
                        <div>2020-10-6 11:30:12</div>
                     </div>
                     <div>
                       <div>6 <span>元</span></div>
                       <div>&nbsp;</div>
                     </div>
                   </div>
                  </div>
                </div>
                <div class="luck-text">\\ 活动规则 //</div>
                <div id="get_rule_html_target" class="activity-rules  show-set-item" data-index=4>
                  <p>1、您邀请的好友为( luckin coffee或小鹿茶)新用户即可获赠新人 大券包。特别提示:如您邀请的好友已经在小鹿茶注册,则不属于 新用户 </p>
                  <p>2、您邀请的新用户只要完成首单(含新人指定免费饮品券消费)为 邀请成功,邀请成功,您即获得1张饮品券,用于抵扣指定饮品,饮 品券有效期1年</p>
                  <p>3、饮品券使用范围:大师咖啡系列、啵啵奶茶系列、牛乳茶系列 </p>
                </div>
              </div>
              <div class="set-set-item">
                  <div class="set-set-item-common" data-index=1>
                    <div class="head">
                      背景整体设置
                    </div>
                    <div class="info">
                      建议可以增加品牌LOGO与名称的元素，背景图可以是衬托活动氛围
                    </div>
                    <div class="item">
                      <p class="title">背景图上传</p>
                      <div class="between-colum">
                        <div>*建议格式.PNG/.jpg/.jpge/.gif，尺寸：375px * 267.5px ，图片不超过1M点击下方按钮可修改图片</div>
                        <div><button class="layui-btn layui-btn-primary layui-btn-sm">+添加图片</button></div>
                      </div>
                      <div class="between-colum">
                        <div>背景整体填充色</div>
                        <div id="get_red_packet_bg"></div>
                      </div>
                    </div>
                  </div>
                  <div class="set-set-item-common" data-index=2 style="display:none;">
                    <div class="head">
                      红包内容显示区设置
                    </div>
                    <div class="info">
                      建议在分享者的角度写一些与分享者可获得的福利有关的提示
                    </div>
                    <div class="item">
                      <p class="title">领取成功红包样式UI设置</p>
                      <div class="between-colum">
                        <div>主要提示文案设置</div>
                        <div class="">
                          <input type="checkbox" lay-filter="chebox-unity-watch" name="get_success_main_checkbox" value="get_success_main_checkbox" title="不显示该标题" lay-skin="primary"> 
                        </div>
                      </div>
                      <div class="item-input"><input type="text" data-target="get_success_main_text" class="layui-input get_success_main_text"></div>

                      <div class="between-colum">
                        <div>次要提示文案设置</div>
                        <div class="">
                          <input type="checkbox"  lay-filter="chebox-unity-watch" name="get_success_second_checkbox" value="get_success_second_checkbox" title="不显示该标题" lay-skin="primary"> 
                        </div>
                      </div>
                      <div class="item-input"><input type="text" data-target="get_success_second_text" class="layui-input get_success_second_text"></div>
                      
                      <div class="between-colum">
                        <div>是否展示优惠券核销门槛</div>
                        <div class="">
                          <select lay-filter="select-unity-watch" name="get_coupon_second_title_select">
                            <option value="1">是</option>
                            <option value="2">否</option>
                          </select>
                        </div>
                      </div>
                      <p class="title">已过期红包样式UI设置</p>
                      <div class="between-colum">
                        <div>主要提示文案设置</div>
                        <div class="">
                          &nbsp; 
                        </div>
                      </div>
                      <div class="item-input"><input type="text" data-target="get_overdue_main_text" class="layui-input get_overdue_main_text"></div>
                      <div class="between-colum">
                        <div>次要提示文案设置</div>
                        <div class="">
                          &nbsp; 
                        </div>
                      </div>
                      <div class="item-input"><input type="text" data-target="get_overdue_second_text" class="layui-input get_overdue_second_text"></div>
                      <p class="title">已领完红包样式UI设置</p>
                      <div class="between-colum">
                        <div>主要提示文案设置</div>
                        <div class="">
                          &nbsp; 
                        </div>
                      </div>
                      <div class="item-input"><input type="text" data-target="get_already_main_text" class="layui-input get_already_main_text"></div>
                      <div class="between-colum">
                        <div>次要提示文案设置</div>
                        <div class="">
                          &nbsp; 
                        </div>
                      </div>
                      <div class="item-input"><input type="text" data-target="get_already_second_text" class="layui-input get_already_second_text"></div>
                      <p class="title">按钮样式UI设置</p>
                      <div class="between-colum">
                        <div>按钮字体样色</div>
                        <div id="get_button_color">
                          
                        </div>
                      </div>
                      <div class="between-colum">
                        <div>按钮填充渐变颜色1</div>
                        <div id="get_button_one_gradient">
                          pick
                        </div>
                      </div>
                      <div class="between-colum">
                        <div>按钮填充渐变颜色2</div>
                        <div id="get_button_two_gradient">
                          pick
                        </div>
                      </div>

                    </div>
                  </div>
                  <div class="set-set-item-common" data-index=3 style="display:none;">
                    <div class="head">
                      领取记录展示区设置
                    </div>
                    <div class="item">
                      <div class="between-colum" style="padding-bottom:0px;">
                        <div>是否展示还可以邀请几几位朋友来拆红包</div>
                      </div>
                      <div class="item-input">
                        <input type="radio" lay-filter="radio-unify-watch" name="get_record_show_radio" value="1" title="是">
                        <input type="radio" lay-filter="radio-unify-watch"  name="get_record_show_radio" value="2" title="否">
                      </div>
                      <div class="between-colum" style="padding-bottom:0px;">
                        <div style="margin-bottom:10px;">提示文案设置</div>
                      </div>
                      <div class="item-input">
                        <input type="text" data-target="get_record_invite_text" class="layui-input get_record_invite_text">
                      </div>
                      <div class="extra-info">
                        提示："X"表示第几位，自定义文案需要在表示剩余可邀请人数的地方添加“X”
                      </div>
                      <div class="between-colum">
                        <div>字体颜色</div>
                        <div id="get_record_color"></div>
                      </div>


                    </div>
                  </div>
                  <div class="set-set-item-common" data-index=4 style="display:none;">
                    <div class="head">
                      活动规则展示区设置
                    </div>
                    <div class="info" style="border-bottom:1px solid #ccc;">
                      建议分别介绍分享方与领取方的奖励规则条件，奖励礼包福利去描述活动规则
                    </div>
                    <div>
                      <textarea name="content" id="get_rule_html" style="width:375px;height:450px;"></textarea>
                    </div>
                  </div>
                  <div class="set-set-item-bottom">
                    <div id="red_packet_default">恢复默认</div>
                    <div id="red_packet_back">撤销编辑</div>
                    <div id="red_packet_save">保存</div>
                  </div>
              </div>
            </div>
            <div class="red-packet-title">领取红包弹窗配置</div>
            <div class="red-packet-layer-wrap">
              <div class="layer-ui">
                <div class="head"></div>
                <div class="content">
                  <div>
                    <div class="content-head">恭喜您获得一个拼手气红包</div>
                    <div class="content-info">快分享给小伙伴看看谁是幸运儿</div>
                    <div class="content-img">
                      <img class="layer_big_img_target" src="../../img/redPacket.png" alt="红包">
                    </div>
                    <div class="content-bottom">
                      <div>取消</div>
                      <div>发红包</div>
                    </div>
                  </div>
                </div>
                <div class="small-img">
                  <img class="layer_small_img_target" src="../../img/redPacket.png" alt="小红包">
                </div>
              </div>
              <div class="layer-set">
                <div class="head">分享弹窗设置</div>
                <div class="info">当用户满足分享条件后，将弹出此弹窗引导用户分享红包给好友去抢红包</div>
                <div class="title">大弹窗图片上传</div>
                <div class="flex-between">
                  <div>*建议格式.PNG/.jpg/.jpge/.gif，尺寸：375px * 267.5px ，图片不超过1M点击下方按钮可修改图片</div>
                  <div><button class="layui-btn layui-btn-primary layui-btn-sm">+上传图片</button></div>
                </div>
                <div class="title">触发大弹窗的小浮窗图片上传</div>
                <div class="flex-between">
                  <div>*建议格式.PNG/.jpg/.jpge/.gif，尺寸：375px * 267.5px ，图片不超过1M点击下方按钮可修改图片</div>
                  <div><button class="layui-btn layui-btn-primary layui-btn-sm">+上传图片</button></div>
                </div>
                <div class="content-bottom">
                  <div class="layer_default">恢复默认</div>
                  <div class="layer_back">撤销编辑</div>
                  <div class="layer_save">保存</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</body>
<script type="text/html" id="applyShopOperatorTpl">
<button class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
</script>

<script src="../../layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../kindeditor/kindeditor-all-min.js"></script>
<script src="./redPacket.js"></script>

</html>